<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<meta content="always" name="referrer">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>欢迎注册</title>
	<!--[if lt IE 9]>
			<script type="text/javascript">
				window.location.href = "tip.html"
			</script>
		<![endif]-->
	<link rel="stylesheet" type="text/css" href="css/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/login.css"/>
	<link rel="stylesheet" href="lib/layui/css/layui.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/layui/layui.js"></script>
	<script src="js/ajaxSet.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/data.js"></script>
    <script src="js/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/wang.js"></script>
	<script src="js/jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
    	#demo1{
    		height: 40px;
    	}
    	#demo1 .layui-input-inline{
    		width: 138px;
    	}
    	#demo1 input{
    		width: 100%;
    		padding: 0 0 0 10px;
    	}
    	#demo1 .layui-this{
    		background: #ff660c;
    	}
    	#demo2 {
    		margin: 0;
    		width: 308px;
    	}
    	#demo2 img{
    		float: left;
    		width: 100px;
    		height: 100px;
    		margin: 10px 5px 0;
    	}
    	#test8{
    		background: #ff6602;
    	}
    	.layui-quote-nm{
    		padding: 0 5px 10px;
    		min-height: 110px;
    		width: 308px;
    		border-width:1px 1px 1px 1px;
    	}
    	.register_main .register_information .register_list .type_li .type_name{
    		float: left;
    	}
    	.register_main .register_information .register_list .type_li .type_mz{
    		float: left;
    	}
    </style>
</head>
<body style="color: #4a4a4a">
	<div class="header_wrap">
		<div class="register_header clearfix">
			<h1>
				<a href="index.html">WELCOME</a><span>欢迎注册</span>
			</h1>
			<p>
				已有账号，请 <a href="login.html">登录</a>
			</p>
		</div>
	</div>
	<div class="register_main main">
		<div class="register_information">
			<div action="http://www.titanmall.cn/TTM/u/subRegister.shtml" id="userRejisterFrom"
				name="userRejisterFrom" method="post" class="demo_form">
				<ul class="register_list">
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>旅行社名称<i> *</i></label>
						</div>
						<div class="type_mz">
							<div class="pdd">
								<input class="re_color f_ui-grey-input" id="orgName" type="text" placeholder="请输入机构名称"/> <i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>品牌名<i> *</i></label>
						</div>
						<div class="type_mz">
							<div class="pdd">
								<input type="text" class="re_color" name="orgBrand" id="orgBrand" nomust="true" customFun="fucOrgBrand"
									placeholder="请输入品牌名" maxlength="64" autocomplete="off"/> <i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>机构地址<i> *</i></label>
						</div>
						<div id="demo1" class="citys type_adress" style="float: left;">
					        <form class="layui-form">
					            <div class="layui-form-item">
					                <div id="province" class="layui-input-inline" style="margin-right: 30px;float: left;">
					                    <select name="provid" id="provid" lay-filter="provid">
					                        <option value="">请选择省</option>
					                        <option value="">北京</option>
					                    </select>
					                </div>
					                <div id ="city" class="layui-input-inline" style="margin-right: 30px;float: left;">
					                    <select name="cityid" id="cityid" lay-filter="cityid">
					                        <option value="">请选择市</option>
					                        <option value="">北京</option>
					                    </select>
					                </div>
					                <div id="area"  class="layui-input-inline" style="margin-right: 30px;float: left;">
					                    <select name="areaid" id="areaid" lay-filter="areaid">
					                        <option value="">请选择县/区</option>
					                        <option value="">朝陽</option>
					                    </select>
					                </div>
					            </div>
					        </form>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name" style="height: 40px;"></div>
						<div class="type_mz">
							<div class="pdd">
								<input type="text" class="re_color" name="addressDetail" id="addressDetail"
									placeholder="请输入详细地址" maxlength="64" datatype="*" errormsg="请输入详细地址！" autocomplete="off"/> <i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>联系人姓名<i> *</i></label>
						</div>
						<div class="type_mz">
							<div class="pdd">
								<input type="text" class="re_color" name="contactName"
									placeholder="请输入联系人姓名" maxlength="16" datatype="*"
									errormsg="请输入联系人姓名！" autocomplete="off" id="lxr" /> <i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>旅行社部门职位</label>
						</div>
						<div class="type_mz type_phone">
							<div class="pdd">
								<input type="text" class="re_color f_ui-grey-input" id="lxszw" name="userAccount" placeholder="旅行社部门及职位" /><i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>手机号</label>
						</div>
						<div class="type_mz type_phone">
							<div class="pdd">
								<input type="text" class="re_color f_ui-grey-input" id="phone" name="userAccount" placeholder="请输入手机号码"   autocomplete="off"/><i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>邮箱<i> *</i></label>
						</div>
						<div class="type_mz type_phone">
							<div class="pdd">
								<input type="text" class="re_color f_ui-grey-input"
									id="userAccount" name="userAccount" placeholder="请输入邮箱!"   autocomplete="off"/><i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>验证码<i> *</i></label>
						</div>
						<div class="type_mz">
							<div class="pdd pdd_y">
								<input type="text" class="re_color" id="vCode" name="vCode"
									placeholder="请输入验证码"  autocomplete="off"/> <i class="J_empty">×</i>
							</div>
							<i class="verify" id="getYZM">获取验证码</i>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>登录密码<i> *</i></label>
						</div>
						<div class="type_mz">
							<div class="pdd">
								<input type="password" class="re_color" id="loginPw" name="loginPw" placeholder="请输入登录密码" 
									maxlength="32" customFun="fucVailPw" errormsg="请输入6-16位英文字母、数字或符号的组合！" autocomplete="off"/> <i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>确认密码<i> *</i></label>
						</div>
						<div class="type_mz">
							<div class="pdd">
								<input type="password" class="re_color" name="rePw"
									placeholder="请重新输入密码" maxlength="32" customFun="fucRepwNumber"
									errormsg="两次输入的密码不一致！" autocomplete="off" id="secondWord" /> <i class="J_empty">×</i>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name">
							<label>请选择旅行社认证文件进行上传认证<i> *</i></label>
						</div>
						<div class="type_mz" style="width: 330px;">
							<div class="layui-upload">
								<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
  								<button type="button" class="layui-btn hide" id="test9" style="display: none;">开始上传</button>
								<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
							    	<div class="layui-upload-list clearfloat" id="demo2"></div>
								</blockquote>
							</div>
						</div>
					</li>
					<li class="type_li clearfloat">
						<div class="type_name" style="height: 30px;"></div>
						<div class="type_register">
							<a class="register_btn" href="javascript:void(0)">立即注册</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="footer">
		<p>
			Copyright &copy;2012-2017,youaizhilv.com.All Rights Reserved 友爱之旅
			版权所有 ICP证：京88888888 号
		</p>
	</div>
	<div id="qq">
		
	</div>
</body>
</html>
<script type="text/javascript">
layui.use('upload', function(){
	var upload = layui.upload;
	var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; 
	
        $("#qq").load("lib/qq.html");$("#footer").load("lib/footer.html");

	var uploadInst = upload.render({
	    elem: '#test8',
	    url: 'http://52lvu.cn:8080/common/api/upload?file_type=authentication',
	    auto: false,
	    exts : 'gif|jpg|jpeg|png|bmp|png',
	    multiple: false,
	    method :"post",
	    data:{
	    	file_type : "authentication"
	    },
	    bindAction: '#test9',
	    choose: function(obj){

            var files = obj.pushFile();
            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function(index, file, result){
            	
                if(file.size > 0 &&  $('#demo2').find('img').length == 0){
                    $('#demo2').empty();
                }

				$('#demo2').append('<a data-index="files[index]"><img src="'+ result +'" alt="'+ file.name +'"></a>');

				$("#demo2 a").bind('click',function(){
                	var thisIndex = $(this).attr("data-index")
                    delete files[thisIndex];
                    $(this).remove();
                });
                
            });
        },
	    before : function(obj){
//			alert("开始上传")
	    },
	    done: function(res){
	    	if(res.code > 0){
	        	layer.confirm('上传失败', {
					btn: ['重试', '取消'] , 
					icon: 5,
					btnAlign: 'c',
					btn1 : function(index){
						layer.close(index);
				  		uploadInst.upload();
				  		
				  	}
				});
		    }else{




	      		var resg = {
	      			name : $("#orgName").val() , //旅行社名称
					brand : $("#orgBrand").val(),	//品牌名
					province : $("#province input").val(),	//机构地址 
					city : $("#city input").val(),
					address : $("#addressDetail").val(),
					userName : $("#lxr").val(),
					phone : $("#phone").val(),
					job : $("#lxszw").val(),
					email : $("#userAccount").val(),
					password : $("#loginPw").val() ,
		      		authPic : res.createFilePath
	      		}

//	      		resg = JSON.stringify(resg)


				var code = $("#vCode").val();


	      		$.ajax({
					type:"post",
					url:"http://52lvu.cn:8080/api/login/reg?captch="+code,
					contentType: "application/json;charset=utf-8",  
                	dataType: "json", 
					beforeSend: function(xhr) {
					    xhr.setRequestHeader("Content-Type", "application/json");
					},
					data:JSON.stringify(resg)
					,success : function (result){



						if (result.resultCode != 200) {
							
							layer.msg("请求错误！请稍候重试",{icon:2,time:3000});
							
						}else{
							layer.msg("注册成功,即将自动跳转到登录页",{icon:1,time:3000});
							setTimeout(function (){
								window.location.href = "login.html";
							},2000)
						}
						
					},error : function (){

						layer.msg("请求错误！请稍候重试",{icon:2,time:3000});
					}
				});

	    	}
	      
	    },
	    error: function(){

	    	layer.confirm('上传失败', {
				btn: ['重试', '取消'] , 
				icon: 5,
				btnAlign: 'c',
				btn1 : function(index){
					layer.close(index);
			  		uploadInst.upload();
			  		
			  	}
			});
	    }

	});


$("#getYZM").on("click",function (){
	getYZM();
})


function getYZM(){
	
    var str = $("#userAccount").val() ;
		if (re.test(str)) {
			$.ajax({
				type:"post",
				url:"http://52lvu.cn:8080/api/login/getCaptch",
				data:{
					email : $("#userAccount").val(),
					state : 1
				},success : function (result){
					
					if(result.resultCode == 200){
						invokeSettime("#getYZM")
					}else if (result.resultCode == 108){
						layer.msg("您的邮箱已经注册，请直接登录",{icon:2,time:3000});
					}
					
				},error : function (){
					layer.msg("请求错误！请稍候重试",{icon:2,time:3000});
				}
			});
		} else{
			layer.msg("请输入格式正确的邮箱",{icon:2,time:3000});
		}
}

	
function invokeSettime(obj){
    var countdown = 60 ;
    settime(obj);
    function settime(obj) {
    	$("#getYZM").unbind();
        if (countdown == 0) {
            $(obj).text("获取验证码");
            $(obj).on("click",function(){
                getYZM()
            })
            countdown = 300;
            return;
        } else {
            $(obj).text("(" + countdown + ") s 重新发送");
            countdown--;
        }
        setTimeout(function() {
        	settime(obj) 
        },1000)
    }
}	
	
	
	$(".register_btn").on("click",function (){

		var name = $("#orgName").val() , //旅行社名称
			brand = $("#orgBrand").val(),	//品牌名
			province = $("#province input").val(),	//机构地址 
			city = $("#city input").val(),
			area = $("#area input").val(),
			address = $("#addressDetail").val(),
			userName = $("#lxr").val(),
			phone = $("#phone").val(),
			email = $("#userAccount").val(),
			password = $("#loginPw").val() ,
			captch = $("#vCode").val() ,
			job = $("#lxszw").val(),
			secondpw = $("#secondWord").val();
			
		if(name == ""){
			layer.msg("请输入旅行社名称",{icon:2,time:3000});
		}else if (brand == "") {
			layer.msg("品牌名",{icon:2,time:3000});
		}else if (province == "" || city == "") {
			layer.msg("请选择机构地址",{icon:2,time:3000});
		}else if (userName == "") {
			layer.msg("请输入联系人姓名！",{icon:2,time:3000});
		}else if (job == "") {
			layer.msg("请输入旅行社部门职位",{icon:2,time:3000});
		}else if (email == "" || re.test(email) == false) {
			layer.msg("请输入正确的邮箱地址",{icon:2,time:3000});
		}else if (captch == "") {x
			layer.msg("请输入验证码",{icon:2,time:3000});
		}else if (password == ""){
			layer.msg("请输入登录密码",{icon:2,time:3000});
		}else if ($("#loginPw").val() != $("#secondWord").val()){
			layer.msg("两次输入的密码不一致",{icon:2,time:3000});
		}else if ($("#demo2 img").length < 1){
			layer.msg("请上传旅行社认证文件",{icon:2,time:3000});
		}else{

			$("#test9").click();
			
		}
	})
})
	
    $('input[placeholder]').placeholder();  

</script>
<script type="text/javascript">
var defaults = {
    s1: 'provid',
    s2: 'cityid',
    s3: 'areaid',
    v1: null,
    v2: null,
    v3: null
};
var $form;
var form;
var $;
layui.define(['jquery', 'form'], function () {
    $ = layui.jquery;
    form = layui.form;
    $form = $('form');
    treeSelect(defaults);

	function treeSelect(config) {
		
	    config.v1 = config.v1 ? config.v1 : 110000;
	    config.v2 = config.v2 ? config.v2 : 110100;
	    config.v3 = config.v3 ? config.v3 : 110101;
	    
	    $.each(threeSelectData, function (k, v) {
	        appendOptionTo($form.find('select[name=' + config.s1 + ']'), k, v.val, config.v1);
	    });
	    
	    form.render();
	    cityEvent(config);
	    areaEvent(config);
	    
	    form.on('select(' + config.s1 + ')', function (data) {
	        cityEvent(data);
	        form.on('select(' + config.s2 + ')', function (data) {
	            areaEvent(data);
	        });
	    });
	
	    function cityEvent(data) {
	        $form.find('select[name=' + config.s2 + ']').html("");
	        config.v1 = data.value ? data.value : config.v1;
	        
	        $.each(threeSelectData, function (k, v) {
	            if (v.val == config.v1) {
	            	
	                if (v.items) {
	                	
	                    $.each(v.items, function (kt, vt) {
	                        appendOptionTo($form.find('select[name=' + config.s2 + ']'), kt, vt.val, config.v2);
	                    });
	                }
	            }
	        });
	        form.render();
	        config.v2 = $('select[name=' + config.s2 + ']').val();
	        areaEvent(config);
	    }
	    function areaEvent(data) {
	        $form.find('select[name=' + config.s3 + ']').html("");
	        config.v2 = data.value ? data.value : config.v2;
	        $.each(threeSelectData, function (k, v) {
	            if (v.val == config.v1) {
	                if (v.items) {
	                    $.each(v.items, function (kt, vt) {
	                        if (vt.val == config.v2) {
	                            $.each(vt.items, function (ka, va) {
	                                appendOptionTo($form.find('select[name=' + config.s3 + ']'), ka, va, config.v3);
	                            });
	                        }
	                    });
	                }
	            }
	        });
	        form.render();
	        form.on('select(' + config.s3 + ')', function (data) { });
	    }
	    function appendOptionTo($o, k, v, d) {
	        var $opt = $("<option></option>").text(k).val(v);
	        if (v == d) { $opt.attr("selected", "selected") }
	        $opt.appendTo($o);
	    }
	}
    
});

</script>